<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="140px">
            <el-form-item label="菜单类型:" prop="level">
              <el-radio-group v-model="form.level" @change="levelChange">
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称:" prop="title">
              <el-input type="text" v-model="form.title" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单:" prop="father_name" v-if="form.level == '2' || form.level == '3'">
              <el-select v-model="form.father_name" placeholder="请选择" ref="selectTree">
                <el-option :key="form.father_id" :value="form.father_id" :label="form.father_name" hidden />
                <el-tree :data="menuList" :props="defaultProps" node-key="id" accordion highlight-current @node-click="handleNodeClick" />
              </el-select>
            </el-form-item>
            <el-form-item label="组件名称:" prop="name">
              <el-input type="text" v-model="form.name" placeholder="请输入组件名称"></el-input>
            </el-form-item>
            <el-form-item label="路由地址:" prop="path_p" v-if="form.level == '1'">
              <el-input type="text" v-model="form.path_p" placeholder="请输入路由地址"></el-input>
            </el-form-item>
            <el-form-item label="路径:" prop="path" v-if="form.level == '1' || form.level == '2'">
              <el-input type="text" v-model="form.path" placeholder="请输入路径"></el-input>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
              <el-input-number v-model="form.sort" controls-position="right" :min="0" :max="99999999999"></el-input-number>
            </el-form-item>
            <el-form-item label="是否固定在导航:" prop="affix">
              <el-switch v-model="form.affix" active-text="是" inactive-text="否"> </el-switch>
            </el-form-item>
            <el-form-item style="margin-bottom: 0; margin-top: 40px">
              <div class="panel-line flex-end">
                <el-button @click="handleCancel">取消</el-button>
                <el-button :loading="loading" type="primary" @click="handleSubmit">保存</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { apiSysPermissionAdd, apiSysPermissionEdit } from '@/api/system'

export default {
  name: 'DialogAdd',
  props: {
    menuList: Array,
    info: Object,
  },
  data() {
    return {
      editModel: 'add',
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      form: {
        id: '',
        level: 1, //菜单类型
        title: '', // 菜单名称
        name: '', //路由名称
        path_p: '', //菜单路径
        path: '',
        icon: '', //图标
        sort: '', //排序
        affix: false, //是否固定在导航
        father_id: '',
        father_name: '',
      },
      rules: {
        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
        path_p: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        affix: [{ required: true, message: '请选择是否固定在导航', trigger: 'blur' }],
        father_name: [{ required: true, message: '请选择上级菜单', trigger: ['blur', 'change'] }],
      },
      loading: false,
    }
  },
  mounted() {
    if (this.info?.id) {
      this.editModel = 'edit'
      this.form = this.info
    }
  },
  computed: {},
  methods: {
    // 保存
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.editModel === 'add') {
            apiSysPermissionAdd(this.form)
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                setTimeout(() => {
                  this.$emit('success')
                }, 1000)
              })
              .catch((res) => {
                this.loading = false
              })
          } else {
            apiSysPermissionEdit(this.form)
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                setTimeout(() => {
                  this.$emit('success')
                }, 1000)
              })
              .catch((res) => {
                this.loading = false
              })
          }
        }
      })
    },
    // 取消
    handleCancel() {
      this.$emit('close')
    },
    // 上级菜单点击
    handleNodeClick(data) {
      this.form.father_id = data.id
      this.form.father_name = data.title
      this.$refs.selectTree.blur()
    },
    // 切换菜单类型
    levelChange(data) {
      if (data == '1') {
        this.form.father_id = ''
        this.form.father_name = ''
      } else if (data == '2') {
        this.form.path_p = ''
        this.form.icon = ''
      } else if (data == '3') {
        this.form.path_p = ''
        this.form.path = ''
        this.form.icon = ''
      }
    },
  },
}
</script>
<style>
.el-select-dropdown.el-popper {
  min-height: 200px;
}
</style>
